<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>腾飞健康管理平台</title>
    <link rel="stylesheet" href="lib/layui/css/layui.css">
</head>
<body style="padding: 10px;">
<div class="layui-row">
    <div class="layui-input-inline layui-col-md5">
        <input type="text" name="searchInput" class="layui-input" placeholder="请输入项目名称或编号">
    </div>
    <div class="layui-input-inline">
        <button class="layui-btn" name="search">搜索</button>
    </div>
</div>
<table id="itemListTable" lay-filter="itemListTable"></table>


<script type="text/javascript" src="lib/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(["table", "jquery", "layer", "laytpl"], function () {
        let table = layui.table;
        let $ = layui.jquery;
        let layer = layui.layer;
        let laytpl = layui.laytpl;

        laytpl.getItemTypeName = function (itemTypeId) {
            let itemTypeName;
            $.ajax({
                url: "/getItemTypeById",
                dataType: "json",
                type: "get",
                data: "itemTypeId=" + itemTypeId,
                async: false,
                success: function (responseData) {
                    itemTypeName = responseData.msg;
                },
                error: function () {
                    console.log("获取itemTypeName请求失败！");
                }
            });
            return itemTypeName;
        };

        let itemTable = table.render({
            elem: "#itemListTable",
            id: "itemListTableId",
            url: "/getExamineItems",
            page: true,
            limit: 5,
            limits: [5, 10, 15],
            method: "post",
            size: "sm",
            toolbar: true,
            toolbar: "#toobarTemplet", //表格头部工具栏模板
            response: {
                countName: "totalCount",
                dataName: "data",
                msgName: "msg",
            },
            request: {
                pageName: "currentPageNum",
                limitName: "pageSize",
            },
            cols: [
                [
                    {type: "checkbox", fixed: "left", align: "center"},
                    {field: "examineItemId", title: "编号", width: 70, align: "center"},
                    {field: "examineName", title: "名称", width: 140, align: "center"},
                    {field: "itemTypeId", title: "所属类别", width: 140, align: "center", templet: "#itemTypeTple"},
                    {field: "price", title: "价格（￥）", width: 140, align: "center"},
                    {field: "applySex", title: "适用性别", width: 140, align: "center"},
                    {field: "applyRange", title: "适用范围", width: 140, align: "center"},
                    {field: "fillStatus", title: "检查条目", width: 120, align: "center", templet: "#filledStatusTple"},
                    {title: "操作", fixed: "right", templet: "#operateTemplete", align: "center"}
                ]
            ]
        });

        $("button[name=search]").on("click", function () {
            let searchInput = $("input[name=searchInput]");
            table.reload("itemListTableId", {
                url: "/fuzzySearchItemByIdAndName",
                page: {
                    curr: 1
                },
                where: {
                    searchInput: searchInput.val()
                },
                method: "post"
            });
        });

        table.on("toolbar(itemListTable)", function (obj) {
            switch (obj.event) {
                case "batchDelete":
                    batchDelete();
                    break;
                case "addExamineItem":
                    addExamineItem();
                    break;
            }
        });

        function batchDelete() {
            layer.confirm("确定要批量删除项目吗？",
                {
                    title: "提示",
                    icon: 3,
                },
                function (index) {
                    let checkStatus = table.checkStatus("itemListTableId");
                    let examineItemIds = "";
                    if (checkStatus.data.length > 0) {
                        for (var i = 0; i < checkStatus.data.length; i++) {
                            examineItemIds = examineItemIds + checkStatus.data[i].examineItemId + ",";
                        }
                    } else {
                        layer.msg("未选择有效数据", {offset: "t", anim: 6});
                    }

                    if (examineItemIds != "") {
                        let loadIndex = null;
                        $.ajax({
                            url: "/batchDeleteExamineItemsByItemIds",
                            dataType: "json",
                            data: "examineItemIds=" + examineItemIds,
                            type: "post",
                            async: true,
                            timeOut: 10000,
                            beforeSend: function () {
                                loadIndex = layer.load();
                            },
                            success: function (responseResult) {
                                layer.close(loadIndex);
                                if (responseResult.code == 1) {
                                    layer.msg(responseResult.msg, {icon: 1, time: 1000}, function () {
                                        $(".layui-laypage-btn")[0].click();
                                    });
                                } else {
                                    layer.msg(responseResult.msg, {icon: 7, time: 1000});
                                }
                            },
                            fail: function () {
                                layer.close(loadIndex);
                                layer.msg("服务器错误，请重试！", {icon: 2, time: 1000});
                            }
                        });
                    }
                    layer.close(index);
                });
        }

        function addExamineItem() {
            layer.open({
                title: "添加项目",
                type: 2,
                maxmin: true,                //最大化最小化
                shade: 0.5,
                anim: 0,                     //弹出动画
                area: ["90%", "90%"],
                content: "/addExamineItem",
                zIndex: layer.zIndex,
                success: null,
                end: function () {
                    itemTable.reload();
                },
            });
        }

        table.on("tool(itemListTable)", function (obj) {
            let data = obj.data;
            switch (obj.event) {
                case "show":
                    show(data);
                    break;
                case "deleteItem":
                    deleteItem(data);
                    break;
                case "add":
                    add(data);
                    break;
                case "edit":
                    edit(data);
                    break;
            }
        });

        function show(data) {
            layer.open({
                title: "查看检查条目",
                type: 2,
                maxmin: true,                //最大化最小化
                shade: 0.5,
                anim: 0,                     //弹出动画
                area: ["90%", "90%"],
                content: "/labExamineClause?examineItemId="+data.examineItemId,
                zIndex: layer.zIndex,
                success: null,
                end: function () {
                    itemTable.reload();
                },
            });
        }

        function edit(data) {
            layer.msg("edit");
        }

        function add(data) {
            layer.open({
                title: "添加条目",
                type: 2,
                maxmin: true,                //最大化最小化
                shade: 0.5,
                anim: 0,                     //弹出动画
                area: ["90%", "90%"],
                content: "/addLabExamineClause?examineItemId="+data.examineItemId,
                zIndex: layer.zIndex,
                success: null,
                end: function () {
                    labClauseTable.reload();
                },
            });
        }

        function deleteItem(data) {
            layer.confirm("确定要删除项目‘<span style='color:red'>" + data.itemName + "’</span>吗？",
                {
                    title: "提示",
                    icon: 3,
                },
                function (index) {
                    let loadIndex = null;
                    $.ajax({
                        url: "/deleteExamineItemById",
                        dataType: "json",
                        data: "examineItemId=" + data.examineItemId,
                        type: "post",
                        async: true,
                        timeOut: 10000,
                        beforeSend: function () {
                            loadIndex = layer.load();
                        },
                        success: function (responseResult) {
                            layer.close(loadIndex);
                            if (responseResult.code == 1) {
                                layer.msg(responseResult.msg, {icon: 1, time: 1000}, function () {
                                    $(".layui-laypage-btn")[0].click();
                                });
                            } else {
                                layer.msg(responseResult.msg, {icon: 7, time: 1000});
                            }
                        },
                        fail: function () {
                            layer.close(loadIndex);
                            layer.msg("服务器错误，请重试！", {icon: 2, time: 1000});
                        }
                    });
                    layer.close(index);
                });
        }


    });
</script>
<script type="text/html" id="toobarTemplet">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDelete">批量删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="addExamineItem">添加项目</button>
    </div>
</script>
<script type="text/html" id="operateTemplete">
    <div class="layui-btn-container">
        <span class="layui-btn layui-btn-primary layui-btn-xs" lay-event="show"
              style="padding-right: 5px;margin-right: 5px">查看</span>
        <span class="layui-btn layui-btn-xs" lay-event="edit"
              style="padding-right: 5px;margin-right: 5px">编辑</span>
        <span class="layui-btn layui-btn-normal layui-btn-xs" lay-event="add"
              style="padding-right: 5px;margin-right: 5px">添加</span>
        <span class="layui-btn layui-btn-danger layui-btn-xs" lay-event="deleteItem"
              style="padding-right: 5px;margin-right: 5px">删除</span>
    </div>
</script>
<script type="text/html" id="filledStatusTple">
    {{# if(!d.fillStatus){ }}
    <span style="color: red">未添加</span>
    {{# } }}
    {{#　if(d.fillStatus){ }}
    <span style="color: green">已添加</span>
    {{# } }}
</script>
<script type="text/html" id="itemTypeTple">
    <span>{{ layui.laytpl.getItemTypeName(d.itemTypeId) }}</span>
</script>
</body>
</html>